<template>
  <!--水球图-->
  <div id="ripple" style="width: 100%; height: 100%; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  name: "Ripple",
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("ripple"))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      let value = 0.54;
      let option = {
        title: [
          {
            text: (value * 100).toFixed(0) + '%',
            left: '50%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
              fontSize: '30',
              fontWeight: '400',
              color: '#8b8d90',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#000',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1,
            },
          },
        ],
        polar: {
          radius: ['43%', '40%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: 'liquidFill',
            radius: '40%',
            z: 1,
            center: ['50%', '50%'],
            amplitude: 20,
            // color: {
            //   type: 'linear',
            //   x: 0,
            //   y: 0,
            //   x2: 1,
            //   y2: 1,
            //   colorStops: [
            //     {
            //       offset: 0,
            //       color: '#324791',
            //     },
            //     {
            //       offset: 1,
            //       color: '#449090',
            //     },
            //   ],
            //   globalCoord: false,
            // },
            data: [
              0.4, 0.3,
              {
                value: 0.4,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0,
              },
              borderDistance: 0,
            },
          },
          {
            name: '',
            type: 'bar',
            roundCap: true,
            z: 2,
            showBackground: true,
            backgroundStyle: {
              color: '#15181e',
            },
            data: [75],
            coordinateSystem: 'polar',
            itemStyle: {

              color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
                {
                  offset: 0,
                  color: '#5acef2',
                },
                {
                  offset: .7,
                  color: '#5073fb',
                },
                {
                  offset: 1,
                  color: '#6ae8d8',
                },
              ]),
            },
          },
        ],
      }

      myChart.setOption(option)

    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
